<html lang="en">
	<!-- http://www.bootstrapmb.com/item/11106/preview -->
	<head>
		<meta charset="utf-8">

		<link href="../css/styles.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
		<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
		<link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
		<link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
		<link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
		<link rel="stylesheet" href="../css/nice-select.css" type="text/css">
		<link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
		<link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
		<link rel="stylesheet" href="../css/style.css" type="text/css">
		<link rel="stylesheet" href="../css/susu.css" type="text/css">

		<!-- Js Plugins -->
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/jquery-ui.min.js"></script>
		<script src="../js/jquery.countdown.min.js"></script>
		<script src="../js/jquery.nice-select.min.js"></script>
		<script src="../js/jquery.zoom.min.js"></script>
		<script src="../js/jquery.dd.min.js"></script>
		<script src="../js/jquery.slicknav.js"></script>
		<script src="../js/owl.carousel.min.js"></script>
	</head>
	<body >

	<!--头部引入-->
	<div class="su_head ">
	</div>

	<br />

		<div id="main-wrapper">
			<section class="gray pt-5 pb-5">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-3 col-md-4 col-sm-12">
							<div class="property_dashboard_navbar">
								<div class="dash_user_avater">
									<img src="#" class="img-fluid avater" alt="" id="avater"  data-toggle="modal" data-target="#myModal">
									<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
										<div class="modal-dialog modal-sm" role="document">
											<div class="modal-content">
												<h4 class="modal-title" id="myModalLabel">
													更换头像
												</h4>
												<iframe src="" frameborder="0" class="hidden" name="frameName"></iframe>
												<form id="postForm" method="post" enctype="multipart/form-data" action="/city/v1/uploadImage" target="frameName">
												<div  style="position: relative;margin-top: 30px">
													<!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
													<!-- 设置opactity为0，使input变透明 -->
													<!-- 只接受jpg，gif和png格式 -->
													<input id="upload-input" name="fileList" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)"/>
													<!-- 自定义按钮效果 -->
												<div style="">
													<span style="font-size: 12px;">上传文件：</span>
													<img id="upload" src="#" style="width: 40px; height: 40px; vertical-align: middle;" />
												</div>
												</div>
												<div style="margin-top: 30px">
													<button class="btn-sm btn btn-success" type="button" onclick="editavator()" >确定</button>
													<button class="btn-sm btn btn-warning" type="button"  data-dismiss="modal">取消</button>
												</div>
												</form>
											</div>

										</div>
									</div>
									<h4 id="avatername">姓名</h4>
								</div>
								<div class="dash_user_menues">
									<ul>
							
										<li class="active"><a href="mypersonal.html"><i class="fa fa-user-tie"></i>个人信息</a></li>
										<li><a href="mycart.html"><i class="fa fa-bookmark"></i>我的收藏<span class="notti_coun style-2">7</span></a></li>
										<li><a href="myorder.html"><i class="fa fa-tasks"></i>我的交易</a></li>
										<li><a href="myinfo.html"><i class="fa fa-tasks"></i>我的发布</a></li>

						
										<li><a href="mypublish.html"><i class="fa fa-pen-nib"></i>发布信息</a></li>
										<li><a href="mypassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a></li>
									</ul>
								</div>
								<div class="dash_user_footer">
									<ul>
										<li><a href="#"><i class="fa fa-power-off"></i></a></li>
										<li><a href="#"><i class="fa fa-comment"></i></a></li>
										<li><a href="#"><i class="fa fa-cog"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
						
						<div class="col-lg-9 col-md-8 col-sm-12">
							<div class="dashboard-body">
								<div class="dashboard-wraper">
									<div class="frm_submit_block">
<!--										<h4>个人信息</h4>-->
										<div class="frm_submit_wrap">
											<div class="form-row">
												<input type="text" class="form-control hidden" value="Yuanyuan" id="userid">
												<div class="form-group col-md-6"><label>姓 名</label><input
														type="text" class="form-control" value="Yuanyuan" id="username"></div>
												<div class="form-group col-md-6"><label>邮 箱</label><input type="email"
														class="form-control" value="1796644863@gmail.com" id="useremail"></div>
												<div class="form-group col-md-6"><label>账 号</label><input
														type="text" class="form-control" value="Web Designer" id="useraccount"></div>
												<div class="form-group col-md-6"><label>电 话</label><input type="text"
														class="form-control" value="123 456 5847" id="userphone"></div>
												<div class="form-group col-md-6"><label>地 址</label><input
														type="text" class="form-control" value="广西科技师范学院14栋607" id="useraddress">
												</div>
												<div class="form-group col-md-6"><label>城 市</label><input type="text"
														class="form-control" value="北海" id="usercity"></div>
												<div class="form-group col-md-6"><label>性 别</label><input type="text"
														class="form-control" value="男" id="usersex"></div>
												<div class="form-group col-md-6"><label>邮 政</label><input type="text"
														class="form-control" value="536100"></div>
												<div class="form-group col-md-12"><label>个性签名</label><textarea
														class="form-control" id="usersign">所有的成功都来自于行动，只有付诸行动，才能一步步走向成功。</textarea>
												</div>
											</div>
										</div>
										<div class="form-group col-lg-12 col-md-12 mt-4"><button
												class="btn btn-theme btn-lg" type="button" onclick="editpersonal()">修改</button>
										</div>
									</div>
					
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

		</div>
	</body>


	<script type="text/javascript">


		//调用公共头部
		$('.su_head').load('head.html');
		//获取导航栏信息
		$(document).ready(function () {
			$.ajax({
				type: 'get',
				url: '/ayuancity/categorys/getcategoryAndtype',
				success: function (res) {
					// console.log( $('.su_nav').text())
					for (let i = 0; i < res.content.data.length; i++) {

						let nav = res.content.data[i];
						var category =
								`
							<li id="${nav.categoryName}">
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
						var drop = '';
						var type = '';
						if (nav.types.length > 0) {
							drop = ` <ul class="dropdown "  >`
							for (let j = 0; j < nav.types.length; j++) {
								type = type + `<li ><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

							}
							type = type + `</ul>`
						}
						var template = category + drop + type + ` </li>`;
						$('.su_nav').append(template);

					}
					// console.log($('.su_head').text());
				}

			})
			// 判断是否登录 已登录 显示昵称
			let citytoken = sessionStorage.getItem('citytoken');
			if (citytoken) {
				$.ajax({
					type: 'GET',
					url: '/city/user/info',
					data: {
						token: citytoken
					},
					success: function (json) {
						if (json.success) {
							let username = json.content.user.userName;
							// console.log(json)
							$('#yuan-login').html(username);
							// $('#user-showname').html(showname);
							$('#yuan-login').attr('data-toggle', 'dropdown');
							$('#yuan-userImg').removeClass("hidden");
							$('#yuan-userImg').attr("src",json.content.user.userImg);

							//个人信息资料栏
							$('#avater').attr("src",json.content.user.userImg)
							$('#username').attr("value",json.content.user.userName);
							$('#avatername').html(json.content.user.userName);
							$('#userid').attr("value",json.content.user.userId);
							$('#useremail').attr("value",json.content.user.userEmail);
							$('#useraccount').attr("value",json.content.user.userAccount);
							$('#userphone').attr("value",json.content.user.userPhone);
							if (json.content.user.userSex==1){
								$('#usersex').attr("value",'男');
							}else {
								$('#usersex').attr("value",'女');
							}

							// $('#useraddress').html(user.userEmail);

						}
					}
				});
			}
		});

		//修改按钮
       function  editpersonal(){
		   let sex=0
		   if ($('#usersex').val()=='男'){
			   sex=1
		   }
		   $.ajax({
			   type: 'Put',
			   url: '/ayuancity/users',
			   dataType:"json",
			   contentType: 'application/json;charset=UTF-8',
			   data: JSON.stringify( {
				   userId: $('#userid').val(),
				   userName: $('#username').val(),
				   userSex: sex,
				   userEmail: $('#useremail').val(),
				   userAccount: $('#useraccount').val(),
				   userPhone: $('#userphone').val(),

				   userAddress: $('#useraddress').val(),
				   userCity: $('#usercity').val(),
				   userSign: $('#usersign').val(),
			   }),
			   success: function (res){
				   alert("修改成功")
				   sessionStorage.setItem('citytoken', res.content.token);
			   }
		   })
	   }

		function loginout() {
			$.ajax({
				type: 'POST',
				url: '/city/user/OutLogin',
				success: function (json) {
					if (json.success) {
						sessionStorage.removeItem('citytoken');
						alert("欢迎下次登录")
						location.href = 'index.html';
					}
				}
			});
		}

		function showImg(input) {
			var file = input.files[0];
			// var url = window.URL.createObjectURL(file)
			// console.log(url)
			// document.getElementById('upload').src=url
			var formData = new FormData();
			formData.append("fileList",file);
			$.ajax({
				type: 'POST',
				url: '/city/v1/uploadImage',
				data: formData,
				contentType : false,
				processData : false,
				success: function (json) {
					if (json.success) {
						console.log(json)
						document.getElementById('upload').src=json.content.url
					}
				}
			});


		}
     function  editavator(){
		 $.ajax({
			 type: 'Put',
			 url: '/ayuancity/users',
			 dataType:"json",
			 contentType: 'application/json;charset=UTF-8',
			 data: JSON.stringify( {
				 userId: $('#userid').val(),
				 userImg: $("#upload").attr("src"),
			 }),
			 success: function (res){
				 alert("修改成功")
				 sessionStorage.setItem('citytoken', res.content.token);
				 location.href = 'mypersonal.html';
			 }
		 })

	 }

	</script>

	<!-- Js Plugins -->
	<script src="../js/main.js"></script>
</html>
